<template>
	<view class="baseView">
		<u-swiper :list="rawlist"></u-swiper>
		<u-section class="my_section" title="全部服务" lineColor="#4267de" :right="false"></u-section>
		<u-grid :col="itemCount" style="margin-top: 16rpx;" :border="false" v-model="itemCount">
			<u-grid-item v-for="(item, index) in serviceList" :key="index" :index="index" @click="clickItem">
				<u-icon
					size="60"
					:name="item.imgUrl"
					label-pos="bottom"
					:label="item.serviceName"
					label-size="28"
				></u-icon>
			</u-grid-item>
			<u-grid-item :index="9">
				<u-icon
					name="more-dot-fill"
					color="#2979ff"
					size="60"
					label="更多服务"
					label-pos="bottom"
					label-size="28"
				></u-icon>
			</u-grid-item>
		</u-grid>
		<u-section class="my_section" title="新闻服务" lineColor="#4267de" :right="false"></u-section>
		<u-sticky><u-tabs class="sticky" :list="tabList" :current="current" @change="tabsChange"></u-tabs></u-sticky>
		<uni-list v-model="newsList">
			<view v-for="(item, index) in newsList" :key="index" class="myCardBox">
				<u-row :gutter="16">
					<u-col :span="3"><u-image :src="item.cover" width="100%" height="150rpx"></u-image></u-col>
					<u-col :span="9">
						<view class="u-line-1" style="font-weight: bold;">{{ item.title }}</view>
						<view class="u-line-2" style="margin-top: 16rpx;">{{ item.content }}</view>
						<view class="u-flex" style="margin-top: 16rpx;">
							<u-icon
								name="thumb-up-fill"
								:label="item.likeNum == null ? 0 : item.likeNum"
								color="#ff557f"
							></u-icon>
							<u-icon
								name="eye-fill"
								:label="item.readNum == null ? 0 : item.readNum"
								color="#5993ff"
								style="margin: 8rpx;"
							></u-icon>
							<u-icon
								name="more-circle-fill"
								:label="item.commentNum == null ? 0 : item.commentNum"
								color="#4caaa2"
							></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>
		</uni-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rawlist: [],
			serviceList: [],
			tabList: [],
			newsList: [],
			current: 0,
			itemCount: 5
		};
	},
	methods: {
		getTopBanner() {
			this.$u.get('/prod-api/api/rotation/list?type=2', {}, {}).then(res => {
				res.rows.forEach((item, index) => {
					let string = this.$u.http.config.baseUrl.concat(item.advImg);
					let tempData = {};
					tempData.image = string;
					this.rawlist.push(tempData);
				});
			});
		},
		getServiceType() {
			this.$u.get('/prod-api/api/service/list', {}, {}).then(res => {
				if (res) {
					res.rows.forEach((item, index) => {
						if (index < 9) {
							let string = this.$u.http.config.baseUrl.concat(item.imgUrl);
							let tempData = {};
							tempData.imgUrl = string;
							tempData.serviceName = item.serviceName;
							this.serviceList.push(tempData);
						}
					});
				}
			});
		},
		getNewsType() {
			return new Promise((resolve, reject) => {
				this.$u.get('/prod-api/press/category/list', {}, {}).then(res => {
					
					resolve(res.data);
				});
			});
		},
		getNews: function(id) {
			return new Promise((resolve, reject) => {
				this.$u.get('/prod-api/press/press/list', { type: id }).then(res => {
					let baseUrl = getApp().globalData.baseUrl;
					res.rows.forEach(item => {
						item.cover = baseUrl.concat(item.cover);
					});
					resolve(res.rows);
				});
			});
		},
		getImageUrl(string) {
			//注意baseurl
			let imageUrl = this.$u.http.config.baseUrl.concat(string);
			return imageUrl;
		},
		getCommitNum(num) {
			return num == null ? 0 : num;
		},
		clickItem: function(index) {
			switch (index) {
				//外卖订单
				case 6:
					uni.navigateTo({
						url: '../mallhomepage/mallhomepage',
						animationType: 'pop-in',
						animationDuration: 200
					});
					break;
			}
		},
		async tabsChange(index) {
			this.current = index;
			let tempId = this.tabList[index].id;
			let data = await this.getNews(tempId);
			this.newsList = data;
		},
		async initTab() {
			let tabData = await this.getNewsType();
			this.tabList = tabData;
			let newsInitData = await this.getNews(tabData[0].id);
			this.newsList = newsInitData;
		},
		getTabNum() {
			uni.getSystemInfo({
				success: res => {
				
					if (res.windowWidth > 500) {
						this.itemCount = 3;
					}
				}
			});
		}
	},
	onLoad() {
		this.getTopBanner();
		this.getServiceType();
		this.initTab();
		console.log('===========');
		this.getTabNum();
	}
};
</script>
<style lang="scss" scoped>
.wrap {
	padding: 16rpx;
	display: flex;
	display: -webkit-flex;
}

.my_section {
	margin-top: 16rpx;
}

.card_item_image {
	width: 80rpx;
	height: 80rpx;
}
.footer_bottom {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
</style>
